<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户登录</title>
		<link rel="stylesheet" href="bootstrap.min.css">
		<style>
			body{
				background:url(1.jpg) no-repeat;
				background-size:100%;
			}
			.wrap{
				width: 800px;
				height: 400px;
				border: 1px solid #999;
				margin:150px auto;
				position: relative;
			}
			h2{
				margin-left: 20px;
				color: #fff;
			}
			.form-group{
				margin-left: 20px;
				margin-top: 10px;
				font-size: 20px;
			}
			#username,#password{
				width: 600px;
			}
			#login{
				width: 100px;
				height: 50px;
				font-size: 20px;
				position: absolute;
				left: 600px;
				bottom:50px;
			}
			.checkbox{
				margin-left: 20px;
				font-size: 20px;
			}
			.checkbox input{
				width: 20px;
				height: 20px;
			}
		</style>
	</head>
	<body>
		
		<div class='wrap'>
			<h2>用户登录</h2>
			<hr>
			<div class="form-group">
				<label for="username">用户名</label>
				<input type="email" class="form-control" id="username" placeholder="请输入用户名">
			</div>
			<div class="form-group">
				<label for="password">密码</label>
				<input type="password" class="form-control" id="password" placeholder="请输入密码">
			</div>

			<div class="checkbox">
				<label>
					<input type="checkbox"  id="check">&nbsp; 30天内免登陆
				</label>
			</div>
			<button type="submit" class="btn btn-primary" id="login">登录</button>
		</div>
		
		<script src="jquery.min.js"></script>
		<script src="common.js"></script>
		<script src="cookie.js"></script>
		<script>
			//给登录按钮绑定单击事件后向后端发送ajax请求
			$("#login").click(function(){
				$.ajax({
					//请求地址【采用字符串的拼接】
					url:`${url}/login`,
					//请求数据【用户名和密码】
					data:{
						username:$("#username").val(),
						password:$("#password").val()
					},
					//请求成功后接受到的回调函数
					success(data){
						//如果后端返回的数据为error则弹出"用户名或密码错误"
						if(data === "error"){
							alert("用户名或密码错误");
						}
						//如果后端返回的数据为success,则将其用户名以会话的形式存储到本地【浏览器关闭即销毁】
						//同时登录成功后跳转到学生管理系统页面
						else{
							if ($("#check")[0].checked) {
								setCookie("username", $("#username").val(), 30);
								setCookie("password", $("#password").val(), 30);
							}
							sessionStorage.setItem("password", $("#password").val());
							sessionStorage.setItem("username",data);
							location.href = `${url}/`
						}
					}
				})
			})
		</script>
	</body>
</html>
